<script setup lang="ts">
import {ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {useRouter} from "vue-router";
import {Toast} from "vant";

const router = useRouter();

const userAccount = ref('');
const userPassword = ref('');

const onSubmit = async () => {
  const res = await myAxios.post('/user/login', {
    userAccount: userAccount.value,
    userPassword: userPassword.value
  });
  console.log(res);
  if (res.code === 0 && res.data) {
    Toast.success('登录成功')
    localStorage.setItem('currentUser', JSON.stringify(res.data)); // 存储用户信息到 localStorage
    router.replace('/');
  } else {
    Toast.fail('登录失败,' + res.description)
  }

};
</script>

<template>
  <van-image
      round
      width="10rem"
      height="10rem"
      src="http://gips2.baidu.com/it/u=1288450699,2319404066&fm=3042&app=3042&f=JPEG&wm=1,huayi,0,0,13,9&wmo=0,0"
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="userAccount"
          name="userAccount"
          label="账户"
          placeholder="请输入账户"
          :rules="[{ required: true, message: '请填写账户' }]"
      />
      <van-field
          v-model="userPassword"
          type="password"
          name="userPassword"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

  <!-- 页面主体内容结束后，添加备案信息区域 -->
  <div class="beian-info" style="text-align: center;color: #999;">
    <p>Copyright © 2024 菱乱成风. All Rights Reserved.</p>
    <p><a href="https://beian.miit.gov.cn" target="_blank">陕ICP备2024040722号</a></p>
    <p>
      <img src="../assets/备案图标.png" style="height: 12px; width:12px ;margin-right: 3px" >
      <a href="https://beian.mps.gov.cn/#/query/webSearch?code=61019002002951" target="_blank">陕公网安备61019002002951</a>
    </p>
  </div>
</template>

<style scoped>
.van-image {
  display: flex;
  margin: 70px auto auto;
}
.van-form {
  margin: 30px auto;
}

/* 新增样式以适应备案信息展示 */
.beian-info {
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 12px;
}

</style>